<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>달력 스크립트</title>
<script type="text/javascript" src="/${initParam.context_root}/js/ajax.js"></script>
<script type="text/javascript" src="/${initParam.context_root}/js/json2.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	//document.oncontextmenu=new Function('return false'); //우클릭방지
	//document.ondragstart=new Function('return false'); //드래그방지
	//document.onselectstart=new Function('return false'); //선택방지
	
	$("#btn_toggle1").click(function(){
		if($("#spCalendar").is(":hidden")){		//상태가 hidden일때 처리할 내용
			$("#spCalendar").slideDown("fast");
			$("#btn_toggle1").html("<b>▲ 업무일정</b>");
		} else{
			$("#spCalendar").slideUp("fast");
			$("#btn_toggle1").html("<b>▼ 업무일정</b>");
		}
	});
	$("#btn_toggle2").click(function(){
		if($("#spToday").is(":hidden")){
			$("#spToday").slideDown("fast");
			$("#btn_toggle2").html("<b>▲ 오늘일정</b>");
		} else{
			$("#spToday").slideUp("fast");
			$("#btn_toggle2").html("<b>▼ 오늘일정</b>");
		}
	});
	
	
});
</script>
<script type="text/javascript">
var monthName = new Array("1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월");
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//Date 생성
var now = new Date();
//현재날짜
var nowd = now.getDate();
//월
var nowm = now.getMonth();
//년
var nowy = now.getFullYear();

var selectDate = '';		//선택 날짜(yyyymmdd 형태)

function showCalendar(day,month,year){
 	//alert("일:"+day+"\n달:"+(month+1)+"\n년:"+year);
 	
	//윤달 계산 4년마다 29일로 지정
	if ((year%4==0||year%100==0)&&(year%400==0)){
		monthDays[1]=29;
	}else{
		monthDays[1]=28;
	}
	var firstDay=new Date(year,month,1).getDay();
	//년, 월, 이전 달, 다음 달
	var calStr="<table id='cal' border=0 cellpadding=5 cellspacing=1 align=center bgcolor=#CCCCCC>";
		calStr+="<tr bgcolor=white><td colspan=7>";
		calStr+="<table border=0 cellpadding=0 cellspacing=0 align=center width=100%>";
		calStr+="<td><font size='2'><a href='javascript:;' onClick='nowm--; if (nowm<0) { nowy--; nowm=11; } showCalendar(nowd,nowm,nowy)' title='이전 월'> <<</a></font></td>";
		calStr+="<td align=center><font size='2'>"+year+"년"+ "&nbsp&nbsp&nbsp" +monthName[month].toUpperCase()+"</font></td>";
		calStr+="<td align=right><font size='2'><a href='javascript:;'  onClick='nowm++; if (nowm>11) { nowy++; nowm=0; } showCalendar(nowd,nowm,nowy)' title='다음 월'> >></a></font></td>";
		calStr+="</tr></table>";
		calStr+="</td></tr>";
		//월, 화, 수, 목, 금, 토, 일
		calStr+="<tr align=center bgcolor='#336666' style='cursor:pointer;'>";
		calStr+="<th><font color='#CC3229' size='2'>일</font></th>";
		calStr+="<th><font color='white' size='2'>월</font></th>";
		calStr+="<th><font color='white' size='2'>화</font></th>";
		calStr+="<th><font color='white' size='2'>수</font></th>";
		calStr+="<th><font color='white' size='2'>목</font></th>";
		calStr+="<th><font color='white' size='2'>금</font></th>";
		calStr+="<th><font color='#3299CC' size='2'>토</font></th>";
		calStr+="</tr>";
	var dayCount=1;
	//주간 색상 지정
	calStr+="<tr id='week' bgcolor=white>";
	//firstDay앞에 공백 td넣기
	for (var i=0;i<firstDay;i++){
		calStr+="<td>";//공백
	}
	
	var now = new Date();
	var nowd = now.getDate();
	var nowm = now.getMonth();
	var nowy = now.getFullYear();
	
	for (var i=0;i<monthDays[month];i++) {
		//일요일, 토요일, 평일 색상 지정을 위한 변수
 		var index = firstDay+i;
	
 		if(dayCount==nowd && month==nowm && year==nowy) {
 			calStr+="<td id='today' align=center bgcolor='#99CC32'><font size='3' color='black'><b>"; // 오늘 날짜일때 배경색 지정,글자 진하게
	} else if(year > nowy){ //내년 이라면 
		calStr+="<td align=center><font size='3' color='gray'>";
	} else if(year < nowy){//작년 이라면
		//시작 날짜가 % 7==0 이면 빨간색
		if(index % 7 == 0){
			calStr += "<td align=center><font color = '#CC3229' size = 3>";
		} else if(index % 7 == 6){
			calStr += "<td align=center><font color = '#3299CC' size = 3>";
		} else {
			calStr += "<td align=center><font color = 'black' size = 3>";
		} 
		//calStr+="<td align=center><font size='3' color='black'>"
	} else if(month>nowm && year<=nowy){ //같은 년 혹은 그 전 년도
		calStr+="<td align=center><font size='3' color='gray'>";
	} else if(dayCount>nowd && month==nowm){ //같은 달 
		calStr+="<td align=center><font size='3' color='gray'>";
	} else {
		//오늘 날짜가 아닐 때 색상 지정
		if(index % 7 == 0){
			calStr += "<td align=center><font color = '#CC3229' size = 3>";
		} else if(index % 7 == 6){
			calStr += "<td align=center><font color = '#3299CC' size = 3>";
		} else {
			calStr += "<td align=center><font color = 'black' size = 3>";
		}
		//calStr+="<td align=center><font size='3' color='black'>"  // 오늘 날짜가 아닐때 배경색 지정
	}
 			calStr+=dayCount++;   // 날짜
 			calStr+="</font>";
 		if(dayCount==nowd) {
 			calStr+="</b>"; // 오늘 날짜일때 글짜 진하게
 		} else {
 			calStr+="";  // 오늘 날짜 아닐 때 글자 진하게 안함
 		}
 		calStr+="</font></td>";
 		
 		if ((i+firstDay+1)%7==0&&(dayCount<monthDays[month]+1)){
 			calStr+="<tr bgcolor=white>";
 		}
 	}

	var totCells=firstDay+monthDays[month];
	//끝나는 다음 날에 공백 td 지정
	for (var i=0; i< (totCells>28?(totCells>35?42:35):28)-totCells; i++){
		calStr+="<td>";
	}
	
	calStr+="</table><BR>";		//달력테이블 종료 
	calendar.innerHTML=calStr;	//달력테이블 그리는 위치
	
	//클릭한 날짜가지고 DB에 저장되어 있는 정보를 json형태로 가져옴, 지난 날은 다른 메시지 출력
	$("td:has(font)").not("td:contains('년')").not("td:has(a)").bind("click", function(){
		
		var realMonth = (month+1);
		if(realMonth<10){			//01월  형태로 바꾸기위함
			realMonth='0'+realMonth;
		} 
		var selDay = $(this).text();
		if(parseInt($(this).text())<10){	//01일  형태로 바꾸기위함
			 selDay = '0'+selDay;
		}
		if(year > nowy){
			alert("지난 날짜를 선택하세요.");
		}else if(year < nowy){ // 클릭 했을 때 현재 년, 월, 일 출력
			selectDate = year +''+ realMonth +  selDay ;
		}else if(month<nowm && year==nowy){
			selectDate = year +''+ realMonth +  selDay ;
		}else if($(this).text()<=nowd && month==nowm){
			selectDate = year +''+ realMonth +  selDay ;
		}else{
			alert("지난 날짜를 선택하세요.");
		 }
	});
	
	$("td:has(font)").not("td:contains('년')").not("td:has(a)").bind("click", function(){
		if(year > nowy){
			
		} else{
			$.ajax({
				"url":"/${initParam.context_root}/JsonTaskDay.do",
				"type":"get",
				"data":"date="+selectDate,
				"dataType":"json",
				"success":function(jobj){
					var tab1 ='';
					var tab2 = '';
					$("#tab1Tbody").empty();
					$("#tab2Tbody").empty();
					$.each(jobj, function(i, vo ){
						tab1 = tab1+"<tr>";
						tab1 = tab1+"<td align='center'>"+ vo.task+"</td>";
						tab1 = tab1+"<td align='center'>"+ vo.state+"</td>";
						tab1 = tab1+"</tr>";	
						
						tab2 = tab2+"<tr>";
						tab2 = tab2+"<td align='center'>"+ vo.schedule+"</td>";
						tab2 = tab2+"<td align='center'>"+ vo.note+"</td>";
						tab2 = tab2+"</tr>";	
					});
					  
					$("#tab1Tbody").append(tab1);
					$("#tab2Tbody").append(tab2);
				},
				"error":function(xhr){
					alert("ajax 요청 오류 : " +xhr.status );
				}
			});
		}
		
	})
	//오늘을 제외한 날짜 마우스를 올렸을 때 배경색 바꿈
	$("td:has(font)").not("td:contains('년')").not("td:has(a)").not("#today").hover( function(){
		$(this).css("background", "#32CD99");
		$(this).css("cursor", "pointer");
	}, function(){
		$(this).css("background", "white");
		$(this).css("cursor", "pointer");
	})
	//오늘날짜 마우스 올렸을때 내렸을때
	$("#today").hover(function(){
		$(this).css("background", "#32CD99");
		$(this).css("cursor", "pointer");
	}, function(){
		$(this).css("background", "#99CC32");
		$(this).css("cursor", "pointer");
	});
	   
	   
}
  
	//js tab
function tab(n) {
	for ( var i = 1; i < 3; i++) {
		var obj = document.getElementById('tab' + i);
		var divStyle = document.getElementById('tab_button' + i);
		if (n == i) {
			obj.style.display = "block";
			divStyle.style.background="lightblue";
			divStyle.style.borderStyle= "inset"; 
			divStyle.style.borderWidth= "1px"; 
			divStyle.style.borderColor= "lightgray";
		} else {
			obj.style.display = "none";
			divStyle.style.background="white";
			divStyle.style.borderStyle="outset"; 
			divStyle.style.borderWidth= "1px"; 
			divStyle.style.borderColor= "lightgray";
		}
	}
}
</script>
</head>
<body leftmargin="10px">
<div id="divCal" style="padding:2px 2px 2px 2px;border-style: solid; border-width: 1px; border-color: lightgray;">
	<div id="btn_toggle1" style="cursor: pointer; background-color: lightgreen"><b>▲업무일정</b></div>
	<div id="spCalendar">
		<div id=calendar STYLE="position:relative;" ><script>showCalendar(nowd,nowm,nowy);</script></div>
	</div>
</div><br>
<div id="divTo" style="padding:2px 2px 2px 2px;border-style: solid; border-width: 1px; border-color: lightgray;">
	<div id="btn_toggle2" style="cursor: pointer; background-color: lightgreen " ><b>▲ 오늘일정</b></div>
	<div id="spToday" style="padding-top: 10px; padding-bottom: 10px;">
		<table width=100% border=0 cellpadding=0 cellspacing=0 bgcolor=#EEEFF0 >
			<tr valign=bottom align="center" >
				<td><div OnClick='tab(1);'style="cursor: pointer; background-color: lightblue; border-style:inset; border-width: 1px; border-color: lightgray; " id='tab_button1'><b>오늘일정</b></div></td>
				<td width=2 style='border-bottom: 1px solid #B7B19F'></td>
				<td>
				<div OnClick='tab(2);'style="cursor: pointer; background-color: white; border-style:outset; border-width: 1px; border-color: lightgray;" id='tab_button2'  ><b>나의일정</b></div></td>
				<td width=2 style='border-bottom: 1px solid #B7B19F'></td>
			</tr>
		</table>
		<div id='tab1' >
		<table cellspacing="3" align="center" width="100%">
			<thead>
			<tr bgcolor="lightgray">
				<th width="77%">업무</th><th>상태</th>
			</tr>
			</thead>
			<tbody id="tab1Tbody">
			
			</tbody>
		</table>
		</div>
		 <div id='tab2' style='display: none;'> 
		 <table cellspacing="3" align="center" width="100%">
			<thead>
			<tr bgcolor="lightgray">
				<th width="70%">할일</th><th>비고</th>
			</tr>
			</thead>
			<tbody id=tab2Tbody>
			
			</tbody>
		</table>
		</div>
	</div>
</div>
<center><br>
<div id="space"></div>
<button onclick="window.close()">닫기</button>
</center>
</body>
</html>